const playButton = document.getElementById('play-button');
  const musicPlayer = document.getElementById('music-player');

  playButton.addEventListener('click', () => {
    if (musicPlayer.paused) {
      musicPlayer.play();
      playButton.textContent = 'II暂停';
    } else {
      musicPlayer.pause();
      playButton.textContent = '继续播放';
    }
  });

  const canvas = document.getElementById('waveform');
  const ctx = canvas.getContext('2d');
  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  const analyser = audioCtx.createAnalyser();
  const source = audioCtx.createMediaElementSource(musicPlayer);

  source.connect(analyser);
  analyser.connect(audioCtx.destination);

  analyser.fftSize = 256;
  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  function drawWaveform() {
    requestAnimationFrame(drawWaveform);
    analyser.getByteTimeDomainData(dataArray);
    
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布背景
    
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#666699'; // 设置波形颜色
    
    ctx.beginPath();

    const sliceWidth = canvas.width * 1.0 / bufferLength;
    let x = 0;

    for(let i = 0; i < bufferLength; i++) {
      const v = dataArray[i] / 128.0;
      const y = v * canvas.height / 2 + canvas.height / 3; // 上下移动波形
      
      if(i === 0) {
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }

      x += sliceWidth;
    }

    ctx.lineTo(canvas.width, canvas.height / 2); // 右侧边缘直线
    ctx.stroke();
  }

  musicPlayer.addEventListener('play', () => {
    audioCtx.resume().then(() => {
      console.log('Audio context resumed');
    });
    drawWaveform();
  });